<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>emp页面</title>
    <script src="static/jquery-3.6.0.min.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="stylesheet" href="static/layui/css/layui.css">
</head>
<body>
<table id="emp" lay-filter="emp"></table>
<!--隐藏表单,点击添加按钮内容-->
<form class="layui-form" action="" style="display: none" id="addEmp" lay-filter="addEmpFormFilter">
    <div class="layui-form-item">
        <label class="layui-form-label">员工编号</label>
        <div class="layui-input-inline">
            <input type="text" name="EMPNO" required lay-verify="required" placeholder="请输入员工编号" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工名称</label>
        <div class="layui-input-inline">
            <input type="text" name="ENAME" required lay-verify="required" placeholder="请输入员工姓名" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">工作</label>
        <div class="layui-input-inline">
            <input type="text" name="JOB" required lay-verify="required" placeholder="请输入员工工作" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上级</label>
        <div class="layui-input-inline">
            <input type="text" name="MGR" required lay-verify="required" placeholder="请输入员工上级编号" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">入职日期</label>
        <div class="layui-input-inline">
            <input type="text" name="HIREDATE" id="HIREDATE" required lay-verify="required" placeholder="请输入员工入职日期" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">工资</label>
        <div class="layui-input-inline">
            <input type="text" name="SAL" required lay-verify="required" placeholder="请输入员工工资" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">奖金</label>
        <div class="layui-input-inline">
            <input type="text" name="COMM" required lay-verify="required" placeholder="请输入员工奖金" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门编号</label>
        <div class="layui-input-inline">
            <select name="deptno" id="deptno1" lay-filter="checkdname">

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit lay-filter="addEmpFilter">立即提交</button>
        </div>
    </div>
</form>
<!--隐藏表单,点击编辑按钮输入内容-->
<form class="layui-form" action="" style="display: none" id="editEmp" lay-filter="editEmpFormFilter">
    <div class="layui-form-item">
        <label class="layui-form-label">员工编号</label>
        <div class="layui-input-inline">
            <input type="text" name="EMPNO" required lay-verify="required" disabled style="color:gray;"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工名称</label>
        <div class="layui-input-inline">
            <input type="text" name="ENAME" required lay-verify="required" placeholder="请输入员工名称" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">工作</label>
        <div class="layui-input-inline">
            <input type="text" name="JOB" required lay-verify="required" placeholder="请输入员工工作" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上级</label>
        <div class="layui-input-inline">
            <input type="text" name="MGR" required lay-verify="required" placeholder="请输入员工上级编号" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">入职日期</label>
        <div class="layui-input-inline">
            <input type="text" name="HIREDATE" required lay-verify="required" placeholder="请输入员工入职日期" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">工资</label>
        <div class="layui-input-inline">
            <input type="text" name="SAL" required lay-verify="required" placeholder="请输入员工工资" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">奖金</label>
        <div class="layui-input-inline">
            <input type="text" name="COMM" required lay-verify="required" placeholder="请输入员工奖金" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门编号</label>
        <div class="layui-input-inline">
            <select name="DEPTNO" id="dname1">

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit lay-filter="editEmpFilter">立即提交</button>
        </div>
    </div>
</form>
</body>
<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
</script>
<script>
    layui.use(['table', 'form', 'layer'], function () {
        let table = layui.table;
        let form = layui.form;
        let layer = layui.layer;
        //第一个实例
        table.render({
            elem: '#emp'
            , height: 350
            , url: 'showAllEmp.do' //数据接口
            , toolbar: '#toolbar'
            , page:true
            , limit:5
            , cols: [[ //表头
                {field: 'select', width: 50, type: 'checkbox', fixed: 'left'}
                , {field: 'EMPNO', title: '员工编号'}
                , {field: 'ENAME', title: '员工名称'}
                , {field: 'JOB', title: '工作'}
                , {field: 'MGR', title: '上级'}
                , {field: 'HIREDATE', title: '入职时间'}
                , {field: 'SAL', title: '工资'}
                , {field: 'COMM', title: '奖金'}
                , {field: 'DEPTNO',title: '部门编号'}
                , {field: 'operation', title: '操作', toolbar: '#operation'}

            ]]
        });
        layui.laydate.render({
            elem: '#HIREDATE' ,//input的id
            type: 'date'//年月日，也是默认，不要这个也可以
        });
        //工具栏按钮添加和批量删除
        table.on('toolbar(emp)', function (obj) {
            let check = table.checkStatus(obj.config.id)
            let data = check.data;
            let layEvent = obj.event;
            if (layEvent === 'add') {
                layer.open({
                    title: '添加员工',
                    type: 1,
                    area: ['550px', '400px'],
                    offset: '200px',
                    content: $("#addEmp")
                });
                    $.ajax({
                        url:"selectDept.do",
                        data:data.field,
                        type:"post",
                        dataType:"json",
                        success:function (result){
                            if(result.code==0){
                                let value = result.data;
                                let opt = '';
                                for(let i in value){
                                    opt += '<option value="'+value[i].deptno+'">'+value[i].dname+'</option>';
                                }
                                $("#deptno1").html(opt);
                                form.render('select');
                            }
                        }
                    });
                //工具栏添加按钮弹出表单提交按钮触发事件
                form.on('submit(addEmpFilter)', function (data) {
                    $.ajax({
                        url: "addEmp.do",
                        data: data.field,
                        dataType: "json",
                        type: "post",
                        success: function (result) {
                            if (result.code == '0') {
                                layer.closeAll();
                                $("#addEmp")[0].reset();
                                form.render();
                                table.reload('emp');
                                layer.msg(result.msg, {icon: 6});
                            } else {
                                layer.msg(result.msg, {icon: 5});
                            }
                        }
                    })
                })
            }
        })

        //行内按钮编辑删除
        table.on('tool(emp)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event;
            if (layEvent === 'del') {
                layer.confirm('确定删除吗?', function (index) {
                    $.ajax({
                        url: "deleteEmp.do",
                        data: {EMPNO: data.EMPNO},
                        type: "post",
                        dataType: "json",
                        success: function (result) {
                            if (result.code == '0') {
                                layer.closeAll();
                                table.reload('emp', {
                                });
                                layer.msg(result.msg, {icon: 6});
                            } else {
                                layer.msg(result.msg, {icon: 5});
                            }
                        }
                    })
                })
            }
        })


    });
</script>
</html>